import { useState, useEffect } from 'react';
import { useIntl } from 'umi';
import {
  Drawer,
  Form,
  Input,
  Select,
  Button,
  message,
  Row,
  Col,
  Switch,
} from 'antd';
import request from '@/utils/request';
import AreaCode from '@/data/areaCode';
import { leadStagefn, leadSourcefn, priorityfn } from '@/data/options';

import CreateAccountForm from '../createAccountForm';

interface PropsType {
  visible: boolean;
  onClose: any;
  onSuccess: any;
}

const EditContactComponent = (props: PropsType) => {
  const intl = useIntl();
  const [form] = Form.useForm();

  const [triggerSubmit, setTriggerSubmit] = useState(false);

  const onClose = () => {
    form.resetFields();
    props.onClose && props.onClose();
  };

  const onSubmitBtn = () => {
    setTriggerSubmit(true);
  };
  const onSubmit = (values: any) => {
    const data = Object.assign({}, values, { role: 'Staff' });
    request
      .post('/team/create', data)
      .then((res) => {
        message.success(intl.formatMessage({ id: 'createsuccess' }));
        form.resetFields();
        props.onSuccess && props.onSuccess(res.data.contact);
      })
      .catch((err) => {
        message.error(err.message);
      });
    setTriggerSubmit(false);
  };

  return (
    <Drawer
      title={intl.formatMessage({ id: 'createusermanagement' })}
      placement="right"
      width="520"
      closable={false}
      onClose={onClose}
      visible={props.visible}
      bodyStyle={{ padding: '30px 40px' }}
      footer={
        <div
          style={{
            textAlign: 'right',
          }}
        >
          <Button onClick={onClose} style={{ marginRight: 8 }}>
            {intl.formatMessage({ id: 'cancel' })}
          </Button>
          <Button onClick={onSubmitBtn} type="primary">
            {intl.formatMessage({ id: 'createTeamMembers' })}
          </Button>
        </div>
      }
    >
      <CreateAccountForm
        source="create"
        formData={false}
        triggerSubmit={triggerSubmit}
        onFinish={onSubmit}
      />
    </Drawer>
  );
};

export default EditContactComponent;
